<template>
  <div class="container">
    <el-input
      class="placeholderInput"
      maxlength="1000"
      show-word-limit
      @keyup.enter.native="publishComment"
      v-model="comment_content"
      placeholder="请大家友善评论"
    >
      <el-link
        slot="suffix"
        :underline="false"
        @click="publishComment"
        class="el-input__icon el-icon-s-promotion"
      ></el-link>
    </el-input>
    <el-card class="comment-container" shadow="hover">
      <div style="font-weight:bold" slot="header">
        共有 {{ count ? count : 0 }} 条评论
      </div>
      <div class="comment-list">
        <CommentCard
          :comment="comment"
          class="comment-card"
          v-for="comment in comments"
          :key="comment.id"
        />
      </div>
      <div style="width:100%;text-align:center;">
        <el-link
          v-if="HaveOtherComment && commentCount > 0"
          @click="LookOtherComment"
          :underline="false"
          >查看其他评论({{ commentCount }})<i class="el-icon-arrow-down"></i
        ></el-link>
      </div>
    </el-card>
  </div>
</template>

<script>
import { sortByCreateTime } from '@/utils/tools'
import CommentCard from './CommentCard'
export default {
  data() {
    return {
      comments: [],
      comment_content: '',
      pageSize: 1,
      limit: 3,
      commentCount: '',
      HaveOtherComment: true // 判断是否还有其他评论
    }
  },
  computed: {},

  components: {
    CommentCard
  },
  props: {
    commentList: {
      type: Array,
      required: true
    },
    page: {
      type: Number,
      required: true
    },
    article: {
      type: Object,
      required: false
      // default: {}
    },
    musicScore: {
      type: Object,
      required: false
      // default: {}
    },
    count: {
      type: Number,
      required: true
    }
  },
  watch: {
    commentList: {
      deep: true,
      immediate: true,
      handler() {
        this.comments = this.commentList
      }
    },
    page: {
      deep: true,
      immediate: true,
      handler() {
        this.pageSize = this.page
      }
    },
    count: {
      deep: true,
      immediate: true,
      handler() {
        this.commentCount = this.count
      }
    }
  },
  methods: {
    // 查看其他评论
    async LookOtherComment() {
      const { article, musicScore } = this
      //  增加页码
      this.pageSize++
      let res
      //  获取评论列表
      if (article) {
        res = await this.$API.article.getCommentList(
          article.id,
          this.limit,
          this.pageSize
        )
      } else if (musicScore) {
        res = await this.$API.musicScore.getCommentList(
          musicScore.id,
          this.limit,
          this.pageSize
        )
      }
      console.log(res)
      //  如果没有数据就取消展开其他评论标签
      if (!res.data) return (this.HaveOtherComment = false)

      console.log(res)
      if (res.status == 200) {
        // 拷贝原先的评论数
        let commentCount = this.commentCount
        this.commentCount = commentCount - this.limit
        this.comments.push(...res.data.payload)
        // 评论排序
        // this.comments = sortByCreateTime(this.comments)
      }
    },
    // 发起评论
    async publishComment() {
      let { article, comment_content, musicScore } = this
      let datas
      let res
      if (article) {
        datas = this.$qs.stringify({ article_id: article.id, comment_content })
        res = await this.$API.article.addComment(datas)
      } else if (musicScore) {
        datas = this.$qs.stringify({
          music_score_id: musicScore.id,
          comment_content
        })
        res = await this.$API.musicScore.addComment(datas)
      }
      if (res.status == 200) {
        this.$message.success('发送评论成功')
        // 刷新评论列表
        this.comment_content = ''
        this.ReloadCommentList()
      }
    },
    // 刷新评论列表
    async ReloadCommentList(source) {
      this.pageSize = 1
      console.log('isReload')
      this.commentCount = this.count
      const { article, musicScore } = this
      let res
      if (article) {
        res = await this.$API.article.getCommentList(
          this.article.id,
          this.limit,
          this.pageSize
        )
      } else if (musicScore) {
        res = await this.$API.musicScore.getCommentList(
          this.musicScore.id,
          this.limit,
          this.pageSize
        )
      }
      if (res.status == 200) {
        // 拷贝原先的评论数
        this.commentCount -= this.limit
        this.comments = sortByCreateTime(res.data.payload)
      }
    }
  },
  mounted() {
    this.commentCount -= this.comments.length
    // 监听重载评论列表事件
    this.$bus.$on('ReloadCommentList', this.ReloadCommentList)
  },
  beforeDestroy() {
    this.$bus.$off('ReloadCommentList', this.ReloadCommentList)
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  padding-top: 10px;
}
.comment-container {
  width: 100%;
  margin-top: 10px;
}
.comment-list .comment-card:not(:last-child) {
  margin-bottom: 20px;
}

.placeholderInput >>> .el-input__inner::placeholder {
  color: #6e7073;
  /* Set the desired color for the placeholder text */
}
.el-card__header {
  padding: 20px;
}
</style>
